<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/personal.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header></common-header>
	<section class="banner" style="background-image: url(./images/personal-bg.png);">
	</section>
	<section class="content">
		<section class="container">
			<user-tabs active-path="question.html"></user-tabs>
			<section class="tab-content">
				<section class="title">问题咨询</section>
				<section class="details">
					<a class="question" href="javascript:;" @click="showModal = true">发起提问</a>
					<section class="question-list">
						<section v-if="questionList.length > 0">
							<section class="question-item" v-for="item in questionList">
								<section class="name">{{ item.question.content }}</section>
								<section class="time">
									{{ item.question.time }}
									<section v-if="item.answerList" class="expand" @click="item.expand = !item.expand">
										{{ item.expand ? '收起' : '展开'}}
										<img :class="{rotate: item.expand}" src="./images/icons/dropdown.png" alt="">
									</section>
								</section>
								<section class="question-content" v-show="item.expand" v-if="item.answerList">
									<template v-for="reply in item.answerList">
										<section class="question-content-item">
											<section>
												<span v-if="reply.needAnswer">我</span>
												<span class="user">
												<span v-if="!reply.needAnswer">{{ reply.answerNickName }}回复:</span>
												<span v-else>
												{{ reply.answerNickName }}回复：
												</span>
											</span>
												{{ reply.content }}
											</section>
											<!--<a v-if="!reply.needAnswer" @click="replyUser(reply)" class="reply-btn" href="javascript:;">回复</a>-->
										</section>
									</template>
								</section>
							</section>
						</section>
						<Empty v-else text="等你提问哦"></Empty>
					</section>
				</section>
			</section>
	</section>
	</section>
	<common-footer></common-footer>
	<common-modal
		:visible.sync="showModal"
		title="问题咨询"
	>
		<section class="question-modal">
			<form class="form layui-form" @submit.prevent>
				<section class="layui-form-item">
					<label class="layui-form-label"><span class="required">*</span>赛区 <span>|</span></label>
					<section class="layui-inline">
						<select lay-verify="required" name="zoneId">
							<option value="">请选择</option>
							<option v-for="item in zoneList" :value="item.id">{{ item.zoneName }}</option>
						</select>
					</section>
				</section>
				<textarea lay-verify="required" maxlength="200" name="questionName" placeholder="请输入内容" class="layui-textarea" rows="10"></textarea>
				<button type="submit" lay-submit="" lay-filter="submitQuestion">提交问题</button>
			</form>
		</section>
	</common-modal>
	<common-modal
		title="回复"
		:visible.sync="showReplyModal"
	>
		<section class="question-modal">
			<form class="form layui-form" @submit.prevent>
				<textarea name="reply" placeholder="请输入内容" class="layui-textarea" rows="10"></textarea>
				<button type="submit" lay-submit="" lay-filter="submitReply">确定</button>
			</form>
		</section>
	</common-modal>
</section>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./components/index.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/ext/questionExt.js"></script>
<script src="../js/abkj/match/api/zone.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				showModal: false,//是否显示弹窗
				showReplyModal: false,//回复弹窗
				currReplyId: 0,//当前要回复的id
				form: null,
				zoneList: [],
				questionList: []
			},
			mounted: function () {
				var vm =this
				ZonequeryList({}, function (data) {
				   var list=[]
				   for (i=0;i<data.length;i++){
					     if (data[i].id>"30"){
							 list.push(data[i])
						 }
				   }
					vm.zoneList = list
				})
				this.getQuestionList()
				layui.use(['laypage', 'form'], function () {
					vm.form = layui.form
					layui.laypage.render({
						elem: 'page',
						count: 50
					})
					vm.form.on('submit(submitQuestion)', function (data) {
						addQuestion({zoneId: data.field.zoneId, question: data.field.questionName}, function () {
							vm.showModal = false
							vm.getQuestionList()
						})
					})
					vm.form.on('submit(submitReply)', function (data) {
						console.log(data)
						console.log('回复成功')
						answerQuestion({
							questionID: vm.currReplyId,
							answer: data.field.reply
						}, function () {
							vm.getQuestionList()
							vm.showReplyModal = false
						})
					})
				})
			},
			methods: {
				getQuestionList: function () {
					var vm = this
					getQuestionList(null, function (questionList) {
						vm.questionList = questionList.map(function (item) {
							item.expand = false
							return item
						})
						// vm.questionList = [
						// 	{
						// 		question: {
						// 			content: '今天是几号',
						// 			time: '2020-01-02'
						// 		},
						// 		answerList: [
						// 			{
						// 				answerNickName: '管理员',
						// 				content: '14号',
						// 				needAnswer: true
						// 			},
						// 			{
						// 				content: '14号',
						// 				needAnswer: false
						// 			}
						// 		]
						// 	}
						// ]
					}, function (err) {
						console.log(err)
					})
				},
				replyUser: function (item) {
					this.currReplyId = item.id
					this.showReplyModal = true
				}
			}
		})
	})
</script>
</body>
</html>
